<template>
  <el-card class="box-card">
    <template #header>
      <div class="card-header" style="display: flex">
        <div>
          <span>专家团队</span>
          <span class="headerSize"
            >可创建：{{ total }}/{{ max_account_num }}</span
          >
        </div>
        <div class="btn" v-if="is_show_button == 1">
          <el-button
            type="primary"
            size="small"
            @click="handleCAddTeach"
            v-hasPermi="['operation:specialty:created']"
            >创建</el-button
          >
        </div>
      </div>
    </template>
    <el-table
      :data="tableData"
      style="width: 100%; height: 100%"
      class="margintop"
      stripe
      :header-cell-style="{ 'border-bottom': 'none' }"
      :header-row-style="{ height: '60px' }"
      :cell-style="{ height: '60px', 'border-bottom': 'none' }"
    >
      <!-- <el-table-column prop="sort" label="排序" width="70" /> -->
      <el-table-column prop="sort" label="排序" width="80px">
        <template #default="scope">
          <el-popover
            :popper-style="{ width: '50' }"
            placement="top-start"
            v-model:visible="scope.row.sortVisible"
            trigger="click"
          >
            <div class="popover">
              <el-input-number v-model="num" :min="0" @change="handleChange" />
              <p class="poverBtn" @click="sortBtn(scope.row)">确定</p>
            </div>
            <template #reference>
              <p style="cursor: pointer" @click="sort(scope.row)">
                {{ scope.row.sort }}
              </p>
            </template>
          </el-popover>
        </template>
      </el-table-column>

      <el-table-column prop="picUrl" label="头像">
        <template #default="scope">
          <ProcessedImage
            :src="scope.row.picUrl"
            :style="{ borderRadius: '50%' }"
            params="imageView2/1/w/57/h/57/q/100"
          />
        </template>
      </el-table-column>
      <el-table-column prop="name" label="姓名" />
      <el-table-column prop="stars" label="星级">
        <template #default="scope">
          <el-rate v-model="scope.row.stars" disabled />
        </template>
      </el-table-column>
      <el-table-column prop="specialty" label="擅长领域">
        <template #default="scope">
          {{
            scope.row.specialty
              ? JSON.parse(scope.row.specialty).join(', ')
              : ''
          }}
        </template>
      </el-table-column>
      <el-table-column prop="title" label="头衔" />
      <el-table-column prop="type" label="操作">
        <template #default="scope">
          <el-tooltip
            class="box-item"
            effect="dark"
            content="编辑"
            editChange
            placement="top"
          >
            <el-icon
              size="20"
              v-hasPermi="['operation:editInfo:edit']"
              style="cursor: pointer"
              @click="editChange(scope.row)"
              ><EditPen
            /></el-icon>
          </el-tooltip>
          <el-tooltip
            class="box-item"
            effect="dark"
            content="删除"
            placement="top"
            ><el-icon
              v-hasPermi="['operation:editInfo:edit']"
              size="20"
              style="cursor: pointer; margin-left: 10px"
              @click="handleDelete(scope.row)"
              ><Delete
            /></el-icon>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
</template>
<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
// import { get} from 'lodash'
import {
  getExpertsTeamList,
  deleteExpertsTeamDel,
} from '@/api/specialty/specialty';
import common from '@/modules';
import { ElMessage } from 'element-plus';
const { sortListApi } = common;
const { proxy } = getCurrentInstance();
const visible = ref(false);
const total = ref(0);
const max_account_num = ref(0);
const is_show_button = ref(1);
const router = useRouter();
const num = ref(0);
const id = ref(null);
const tableData = ref([]);

const handleChange = (val) => {
  sort.value = val;
};
const sort = (val) => {
  num.value = val.sort;
  id.value = val.id;
  sort.value = val.sort;
  visible.value = tableData.value.filter((item) =>
    item.id == val.id ? (visible.value = true) : (visible.value = false)
  );
};
const sortBtn = (row) => {
  visible.value = false;
  let params = ref({
    type: 'specialty',
    id: id.value,
    sort: sort.value,
  });
  sortListApi(params.value).then(() => {
    ElMessage({
      message: '操作成功',
      type: 'success',
    });
    fetchExpertsTeamList();
  });
  row.sortVisible = false;
};

const fetchExpertsTeamList = () => {
  getExpertsTeamList().then((res) => {
    tableData.value = res.data.data;
    total.value = res.data.total;
    max_account_num.value = res.data.max_account_num;
    is_show_button.value = res.data.is_show_button;
  });
};

fetchExpertsTeamList();

const handleDeleteExpertsTeamDel = (id) => {
  deleteExpertsTeamDel({ id }).then((res) => {
    if (res.code == 20000) {
      fetchExpertsTeamList();
      proxy.$modal.msgSuccess(res.msg);
    }
  });
};
// 删除
const handleDelete = (rowData) => {
  proxy.$modal
    .confirm(`确认要删除【${rowData.name}】吗?`)
    .then(function () {
      return handleDeleteExpertsTeamDel(rowData.id);
    })
    .catch(() => {});
};

// 新增老师
const handleCAddTeach = () => {
  router.replace('/operation/editInfo');
};

// 修改老师
const editChange = (rowData) => {
  router.push({
    path: '/operation/editInfo',
    query: { id: rowData.id },
  });
};
</script>
<style lang="scss" scoped>
:deep(.el-form--inline .el-form-item) {
  margin-right: 7px;
}
:deep(.el-table) {
  max-height: none;
  margin-top: 0;
  padding-top: 0;
}
:deep(.el-form-item--default) {
  margin-bottom: 4px;
}
.poverBtn {
  cursor: pointer;
  margin-top: 10px;
  color: #165dff;
  font-size: 14px;
}
.box-card {
  margin: 20px;

  .card-header {
    font-size: 20px;
    font-weight: 600;
    color: #1d2129;
    padding: 10px;
    .btn {
      margin-left: 10px;
    }
    .headerSize {
      color: #4e5969;
      font-size: 14px;
      margin-left: 12px;
      font-weight: 400;
      height: 20px;
      line-height: 21px;
    }
  }
}
</style>
